MagicalCoder.install({
  /*左侧可拖拽的源*/
  dragItems: [
    {
      name: "我的组件",
      icon: "layui-icon layui-icon-face-smile",
      children: [
        {
          name: "在线文档",
          icon: "ri-checkbox-indeterminate-line",
          html: "<mc-luckysheet></mc-luckysheet>",
        },
      ]
    }
  ],
  /*自定义组件和属性*/
  components: [
    {
      "identifier": "mc-luckysheet",
      "properties": {
        "primary": 0,
        "name": "在线文档",
        "treeExtraName": {"attr": [], "text": true},
        "dragInto": false,
        "duplicate": true,
        "duplicateAttr": [],
        "copy": true,
        "paste": false,
        "canDelete": true,
      },
      "attributes": [
        {
          "title": "属性",
          "active": true,
          "content": [
            {
              type: "html",
              category: "配置",
              callback: {
                htmlCallback: function (param) {
                  return `
   <div class="layui-row layui-col-space3" id="downloadApp">
    <template>
      <div class="layui-col-xs12">
        <el-row>
          <div :span="24">
            <template>
              <el-form v-if="dataManager"  label-position="left" size="mini"
                       label-width="80px">
                <el-form-item label="基础api">
                  <el-input clearable v-model="dataManager.magicalCoderUrl" placeholder="magicalCoderUrl"></el-input>
                </el-form-item>
                <el-form-item label="操作">
                  <el-button plain type="primary" @click="saveStatus" size="mini">保存</el-button>
                </el-form-item>
              </el-form>
            </template>
          </div>
        </el-row>
      </div>
    </template>
  </div>
                  `;
                },
                render: function (param) {
                  setTimeout(function () {
                    let focusNode = param.focusNode;
                    new Vue({
                      el: '#downloadApp',
                      data: {
                        dataManager: {
                          "magicalCoderUrl": "",
                        }
                      },
                      methods: {
                        saveStatus() {
                          MAGICAL_CODER_API.changeAttr({
                            node: focusNode,
                            name: "datamanager",
                            value: JSON.stringify(this.dataManager)
                          }, false)
                          this.$message.success("保存成功")
                        },
                        importDataManager() {
                          if (MAGICAL_CODER_API.getFocusNode().attributes.datamanager) {
                            let renderInfo = JSON.parse(MAGICAL_CODER_API.getFocusNode().attributes.datamanager.replaceAll('&quot;', '"'))
                            console.log("重新载入的参数", renderInfo);
                            this.dataManager = renderInfo
                          }
                        }
                      },
                      mounted: function () {
                        this.importDataManager()
                      }
                    })
                  }, 5)
                }
              }
            },
          ]
        }
      ]
    }
  ]
});
